<template>
	<view class="goods-box" @tap="click">
		<view class="img-box">
			<image class="tag-img" v-if="tagImage" :src="tagImage" mode="widthFix"></image>
			<image class="img" :src="image" lazy-load mode="aspectFill"></image>
		</view>
		<view class="title more-t px10 my10">{{ title }}</view>
		<view class="sub-title one-t px10 mb10">{{ subtitle }}</view>
		<view class="u-m-b-10 px20" v-if="detail.activity_discounts_tags.length">
			<view class="tag-box  u-m-r-10" v-for="(tag, index) in detail.activity_discounts_tags" :key="index">{{ tag }}</view>
		</view>
		<view class="tip-list x-f px10 mb10">
			<view class="tip-tag mr10" v-if="tagText">{{ tagText }}</view>
		</view>
		<view class="price-box x-bc px10">
			<view class="">
				<view class="price">{{ price }}</view>
				<view class="origin-price">￥{{ originPrice }}</view>
			</view>

			<view class="cart-box" v-if="!detail.activity">
				<view class="" v-if="!detail.is_sku">
					<button class="cu-btn cart-btn" v-if="!isCart(detail.id)" @tap.stop="addCart(detail.sku_price[0])"><text class="cuIcon-cartfill"></text></button>
					<view class="num-step" v-else>
						<uni-number-box
							@change="onChangeNum($event, detail.sku_price[0])"
							:value="checkCart[detail.id].num"
							:step="1"
							:min="0"
							:currentSkuPrice="detail.sku_price[0]"
							:goodsInfo="detail"
							:disabled="numberDisabled"
						></uni-number-box>
					</view>
				</view>
				<!-- 多规格 -->
				<button class="cu-btn item-btn sm sel-sku" @tap.stop="selSku(detail)" v-else>选规格</button>
			</view>
		</view>
		<!-- 规格 -->
		<t-sku v-model="showSku" v-if="showSku && goodsInfo.id" :goodsInfo="goodsInfo" :buyType="'cart'"></t-sku>
	</view>
</template>

<script>
/**
 * 商品列表卡片
 * @property {String} tag - 商品标签
 * @property {String} image - 商品图片
 * @property {String} title - 商品标题
 * @property {Array} tagText - 商品标签,优惠提示
 * @property {String} price - 商品价格
 * @property {String} originPrice - 商品原价
 * @property {Object} detail - 商品详情
 *  @event {Function} click 商品被点击
 */
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {},
	data() {
		return {
			tagImage: '',
			tagText: '',
			numberDisabled: false, //加入购物车
			showSku: false, //显示规格弹窗
			goodsInfo: {} //商品详情
		};
	},
	props: {
		image: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: ''
		},
		subtitle: {
			type: String,
			default: ''
		},
		price: {
			type: [String, Number],
			default: ''
		},
		originPrice: {
			type: String,
			default: ''
		},
		detail: {
			type: Object,
			default: null
		}
	},
	computed: {
		...mapState({
			cartList: state => state.cart.cartList
		}),
		// 购物车检测
		checkCart() {
			let obj = {};
			this.cartList.forEach(item => {
				obj[item.goods_id] = {
					num: item.goods_num,
					cartOrderId: item.id
				};
			});
			return obj;
		}
	},
	created() {
		this.detail.id && this.initTag();
	},
	methods: {
		...mapActions(['getCartList', 'changeCartList', 'addCartGoods']),
		//点击商品
		click() {
			this.$emit('click');
		},
		initTag() {
			if (this.detail.activity_status === 'waiting' || this.detail.activity_status === 'ing') {
				this.tagImage = this.$IMG_URL + '/goods/limit_tag.png';
				this.tagText = Number(this.detail.limit_rules_arr.limit_time_num) ? `限购${this.detail.limit_rules_arr.limit_time_num}件` : '';
			} else {
				this.detail.is_hot ? (this.tagImage = this.$IMG_URL + '/goods/goods_hot_tag.png') : (this.tagImage = '');
				this.detail.limit_rules && Number(this.detail.limit_rules_arr.limit_num) ? (this.tagText = `限购${this.detail.limit_rules_arr.limit_num}件`) : (this.tagText = '');
			}
		},
		// 检测是否为购物车商品
		isCart(id) {
			let goodsId = id + '';
			return Object.keys(this.checkCart).includes(goodsId);
		},

		// 检测商品在购物车中的下标
		checkGoodsIndex(id) {
			let cIndex = 0;
			this.cartList.forEach((item, index) => {
				if (id == item.goods_id) {
					cIndex = index;
				}
			});
			return cIndex;
		},
		// 更改商品数
		async onChangeNum(e, goods) {
			let gIndex = this.checkGoodsIndex(goods.goods_id);
			if (e != this.checkCart[goods.goods_id].num) {
				this.numberDisabled = true;
				uni.showLoading({
					mask: true
				});
				if (e <= 0) {
					await this.changeCartList({ ids: [this.checkCart[goods.goods_id].cartOrderId], art: 'delete' });
				} else {
					this.$set(this.cartList[gIndex], 'goods_num', +e);
					await this.changeCartList({
						ids: [this.checkCart[goods.goods_id].cartOrderId],
						goodsNum: +e,
						art: 'change'
					});
				}
				this.numberDisabled = false;
				await uni.hideLoading();
			}
		},
		// 添加购物车,多规格
		async selSku(info) {
			this.goodsInfo = {};
			this.getGoodsDetail(info.id);
			this.showSku = true;
		},

		// 商品详情
		getGoodsDetail(id) {
			let that = this;
			that.$api('goods.detail', {
				id: id
			}).then(res => {
				if (res.code === 1) {
					that.goodsInfo = res.data;
				}
			});
		},

		// 加入购物车
		addCart(goods) {
			if (goods.stock <= 0) {
				this.$tools.toast('库存不足');
				return;
			}
			let obj = {
				goods_id: goods.goods_id,
				goods_num: 1,
				sku_price_id: goods.id,
				goods_price: goods.price
			};
			let confirmGoodsList = {
				list: [obj],
				from: 'goods'
			};
			this.addCartGoods(confirmGoodsList).then(res => {
				if (res.code === 1) {
					this.$tools.toast(res.msg);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.goods-box {
	width: 345rpx;
	background: #fff;
	padding-bottom: 20rpx;
	border-radius: 20rpx;
	overflow: hidden;

	.img-box {
		width: 345rpx;
		height: 345rpx;
		overflow: hidden;
		position: relative;
		z-index: 2;
		background-color: #fff;
		.tag-img {
			position: absolute;
			top: 10rpx;
			left: 10rpx;
			width: 66rpx;
			height: 66rpx;
			z-index: 4;
		}

		.img {
			width: 345rpx;
			height: 345rpx;
			background-color: #ccc;
		}
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		width: 345rpx;
		line-height: 36rpx;
	}

	.sub-title {
		font-size: 24rpx;
		font-weight: 400;
		width: 345rpx;
		color: #999999;
	}
	.tag-box {
		border: 1px solid #ff0000;
		display: inline-block;
		font-size: 20rpx;
		line-height: 30rpx;
		padding: 0 10rpx;
		color: #ff0000;
		border-radius: 8rpx;
	}
	.tip-tag {
		padding: 0 10rpx;
		line-height: 30rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: $t-mainColor;
		border: 1px solid $t-mainColor;
	}

	.price-box {
		.price {
			font-size: 36rpx;
			color: $t-priceColor;
			font-weight: 600;
			&::before {
				content: '￥';
				font-size: 28rpx;
			}
		}
		.origin-price {
			font-size: 26rpx;
			font-weight: 400;
			text-decoration: line-through;
			color: #c4c4c4;
		}
	}
	.cart-box {
		.cart-btn {
			width: 54rpx;
			height: 54rpx;
			border-radius: 50%;
			padding: 0;
			background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
			.cuIcon-cartfill {
				color: #fff;
				font-size: 32rpx;
			}
		}
		.sel-sku {
			background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
			border-radius: 30rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
